<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
        <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <div id="sliders">
            <table>
                <tr>
                    <td>α 角（内旋转角）</td>
                    <td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
                </tr>
                <tr>
                    <td>β 角（外旋转角）</td>
                    <td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
                </tr>
                <tr>
                    <td>深度</td>
                    <td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
                </tr>
            </table>
        </div>
        <script>
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column',
                        options3d: {
                            enabled: true,
                            alpha: 15,
                            beta: 15,
                            depth: 50,
                            viewDistance: 25
                        }
                    },
                    xAxis: {
                        categories:['热门','旅游','文化','历史','军事','国际','科技'],
                        title: {
                            text: '类别'
                        }
                    },

                    yAxis: {
                        min: 0,
                        title: {
                            text: '访问次数',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    title: {
                        text: '该类别读数量'
                    },
                    subtitle: {
                        text: '可滑动下方滑块'
                    },
                    plotOptions: {
                        column: {
                            depth: 25
                        }
                    },
                    series: [{
                        name: '类别访问量',
                        data: {{data.count}},
                    }]
                });
                // 将当前角度信息同步到 DOM 中
var alphaValue = document.getElementById('alpha-value'),
		betaValue = document.getElementById('beta-value'),
		depthValue = document.getElementById('depth-value');
function showValues() {
		alphaValue.innerHTML = chart.options.chart.options3d.alpha;
		betaValue.innerHTML = chart.options.chart.options3d.beta;
		depthValue.innerHTML = chart.options.chart.options3d.depth;
}
// 监听 sliders 的变化并更新图表
$('#sliders input').on('input change', function () {
		chart.options.chart.options3d[this.id] = this.value;
		showValues();
		chart.redraw(false);
});
showValues();

        </script>
    </body>
</html>
